// 初始值
var page = 1;

// 给换一换加点击事件
document.querySelector('#btn').addEventListener('click',function () {
    //让page加1
    page++;
    //解决追加问题    让他先清空
    document.querySelector('#list').innerHTML = "";
    //执行ajax方法
    loadXMLDoc();
})


// 获取 json 数据用的 ajax 方法
function  loadXMLDoc() {
    var xmlhttp;
    if (window.XMLHttpRequest){
        // IE7+,Firefox,Chrome,Opera,Safari 浏览器执行代码
        xmlhttp = new XMLHttpRequest();
    }
    else {
        // IE6,IE5 浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            var json = xmlhttp.responseText;
            // 把获取到的数据，转成数组对象格式，方便js操作
            json = JSON.parse(json);
            // console.log(json.shop);
            for (let i = 0;i < json.shop.length;i++){
                console.log(json.shop[i])
                // 创建节点
                var img = document.createElement('img');
                img.src = json.shop[i].pic;
                // 创建h3节点
                var h3 = document.createElement('h3');
                h3.innerHTML = json.shop[i].title;
                // 创建jiage 节点
                var jiage = document.createElement('jiage');
                jiage.innerHTML = json.shop[i].jiage;
                // 创建 qian节点
                var qian = document.createElement('qian');
                qian.innerHTML = json.shop[i].qian;
                // // 创建p节点
                // var p = document.createElement('p');
                // p.innerHTML = json.shop[i].price;
                // 创建 bai节点
                var bai = document.createElement('bai');
                bai.innerHTML = json.shop[i].bai;
                // 创建fen 节点
                var fen = document.createElement('fen');
                fen.innerHTML = json.shop[i].fen;
                // 创建price节点
                var price = document.createElement('price');
                price.innerHTML = json.shop[i].price;
                // 创建heng节点
                var heng = document.createElement('heng');
                heng.innerHTML = json.shop[i].heng;
                // 创建tiao节点
                var tiao = document.createElement('tiao');
                tiao.innerHTML = json.shop[i].tiao;
                // 创建div节点
                var div = document.createElement('div');

                // 向div标签追加3个子标签
                div.appendChild(img)
                div.appendChild(h3)
                div.appendChild(qian)
                // div.appendChild(p)
                div.appendChild(heng)
                div.appendChild(tiao)
                div.appendChild(bai)
                div.appendChild(fen)
                div.appendChild(jiage)
                div.appendChild(price)




                console.log(div);

                //把3个div标签追加到最大的 div#list标签
                document.querySelector('#list').appendChild(div)
            }
            //     document.getElementById('myOiv').innerHTML = xmlhttp.responseText;
        }
    }
    if (page>5){
        page=5;
    }
    xmlhttp.open("GET",page + ".json",true);
    xmlhttp.send();
}

// 先执行一遍ajax方法
loadXMLDoc();